<template>
    <Head-img :name="head.name" :text="head.text" />
    <div class="video">
        <div class="video-content">
            视频分类
        </div>
        <div class="video-card">
            视频列表
        </div>
    </div>
</template>

<script lang="ts">
import HeadImg from "@/components/HeadImg.vue"
import { reactive } from 'vue'

interface Head{
    name: string;
    text: string;
}

export default {
    name:'vlog',
    components:{
        HeadImg
    },
    setup(){
        const head: Head = reactive({
            name:'视频',
            text:'在全球十亿多人中，两人能一间倾心的概率远小于1%。'
        })

        return {
            head
        }
    }
    
}
</script>

<style lang="scss" scoped>
    .video{
        display: flex;
        justify-content: center;
        &-content{
            width: 150px;

        }
        &-card{
            width: 700px;
        }
    }
</style>